<script setup>
import {computed, nextTick, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import routes from "../config/route.ts";

const router = useRouter();
const route = useRoute();
const onClickLeft = () => {
  router.back()
};

const onClickRight = () => {
  router.push('/search')
};

const DEFAULT_TITLE = '云交友';

// 使用路由守卫
//https://v3.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB
// 在组件挂载后获取 currentUser
const currentUser = ref({}); // 初始化 currentUser 为 null
const showTitle = ref(DEFAULT_TITLE);
const isLoginPage = ref(false);
const isIndexPage = ref(false);
router.beforeEach((to, from) => {
  const titleRes = routes.find(item => item.path === to.path)
  console.log(titleRes)
  if (to.path === '/user/login') {
    isLoginPage.value = true;
  } else {
    isLoginPage.value = false;
  }
  if (to.path === '/') {
    isIndexPage.value = true;
  } else {
    isIndexPage.value = false;
  }
  // 添加计算属性来判断是否显示左侧文本
  const shouldShowLeftText = computed(() => !isLoginPage.value && !isIndexPage.value);
  console.log("isIndexPage",isIndexPage.value)
  console.log("isIndexPage",isIndexPage.value)
  console.log("shouldShowLeftText",shouldShowLeftText.value)
  if (titleRes) {
    showTitle.value = titleRes.title;
  } else {
    showTitle.value = DEFAULT_TITLE
  }
  const storedCurrentUser = localStorage.getItem('currentUser');
  if (storedCurrentUser) {
    currentUser.value = JSON.parse(storedCurrentUser);
  }
})

const showCreate = ref(false);// 新增，用于控制van-share-sheet的显示状态
// 修改onClickRight方法
const toCreatePage = async () => {
  await nextTick(); //
  showCreate.value = true; // 弹出van-popup
};


const options = [
  { name: '用户', icon: 'https://img0.baidu.com/it/u=3888885994,636866341&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
  { name: '队伍', icon: 'https://bpic.51yuansu.com/pic3/cover/00/69/31/58ad6f708c5bf_610.jpg?x-oss-process=image/resize,w_260/sharpen,100' },
];

const onSelect = (option) => {
  if (option.name === '用户') {
    router.push('/user/register');
    showCreate.value = false;
  } else if (option.name === '队伍') {
    router.push('/team/create');
    showCreate.value = false;
  }
};


</script>

<template>
  <!--顶部导航栏-->
  <van-nav-bar
      :title="showTitle"
      :left-text="!shouldShowLeftText?'':'返回'"
      :left-arrow="shouldShowLeftText"
      @click-left="onClickLeft"
      @click-right="onClickRight">
    <template #right v-if="!isLoginPage">
      <van-icon name="search" size="18"/>
    </template>
  </van-nav-bar>

  <!--内容-->
  <div id="content">
    <router-view/>
  </div>

  <!--底部菜单栏-->
  <van-tabbar v-if="route.path !== '/user/login'" route>
    <van-tabbar-item replace to="/" icon="home-o" name="index">主页</van-tabbar-item>
    <van-tabbar-item replace to="/team" icon="search" name="team">队伍</van-tabbar-item>
    <van-tabbar-item  v-if="currentUser && currentUser.id === 1" is-link icon="plus" name="user" @click="toCreatePage">创建</van-tabbar-item>
    <van-tabbar-item replace to="/user" icon="setting-o" name="user">{{}}个人</van-tabbar-item>
  </van-tabbar>

  <van-share-sheet
      v-model:show="showCreate"
      title="创建类型"
      :options="options"
      @select="onSelect"
  />

</template>

<style scoped>

</style>